<template>
  <div class="gys">
    <!-- 头部 -->
    <user-header :headerData="headerData" @show="_show_qrcode()"></user-header>
    <!-- 导航 -->
    <user-nav :memberData="memberData" :current="6"></user-nav>
    <!-- 提现 -->
    <div class="accountPanel-links" :class="[wxConfig.template_style == 1 || template_style == 1? 'style1':'style2']">
      <section class="accountPanel">
        <div class="iner-bor">
          <div @click="Jump('commissionContent')">
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(total_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
              <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
              <p>{{ftitle_commission_left}}</p>
            </div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
              <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
              <p>待收益</p>
            </div>
          </div>
          <span @click="Jump('myCommission')" class="fr btn-sign">
            <i></i>提现
          </span>
        </div>
      </section>
    </div>
    <!-- 我的服务 -->
    <gys-index :gysInfo="gysInfo" v-if="wxConfig.template_style == 1 || template_style == 1" @showQrcode="_show_qrcode()"></gys-index>
    <gys-index2 :gysInfo="gysInfo" v-else-if="wxConfig.template_style == 2 || template_style == 2" @showQrcode="_show_qrcode()"></gys-index2>

    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import userHeader from '@/views/user/components/header/index'
import gysIndex from '@/views/user/gys/components/gysIndex/index'
import gysIndex2 from '@/views/user/gys/components/gysIndex2/index'
import { getGysCenter } from '@/api/user/gys/gysApi'
import { getCommissionIncome } from '@/api/user/user'
// import bg_img from '@img/user/member/user_style3_bg_black.png'
// import user_img from '@img/user/userimg.png'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import Vue from 'vue'
import { Popup } from 'vant'
import small from '@/smallapp/small'

Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      template_style: '',
      memberData: {},
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/user/userimg.png',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true,
        gys_area: '',
        ftitle_agency_area: ''
      },
      gysInfo: {},

      is_show_qrcode: false,

      // top_bg: null,
      qrcode_url: '',

      remaining_commission: '--',
      ftitle_commission_left: '',
      wait_commission: '--'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      getGysCenter().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理title
            wx.setNavigationBarTitle({
              title: res.data.ftitle_gys_center
            })

          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''

          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end
          //  头部数据
          if (resData.top_bg != '') {
            this.headerData.bgImg = resData.top_bg
          }
          this.headerData.userImg = resData.avatar
          this.headerData.nickname = resData.userInfo.nickname
          this.headerData.mobile = resData.userInfo.mobile
          this.headerData.show_level = resData.show_level
          this.headerData.rank_name = resData.userInfo.rank_name
          this.headerData.end_time = resData.userInfo.end_time
          this.headerData.letterCount = resData.common_center_parameter.letterCount
          // this.headerData.show_qrcode = resData.common_center_renovation_parameter.show_qrcode
          this.qrcode_url = resData.qrcode_url
          //  link数据
          // this.total_commission = resData.userInfo.total_commission
          this.ftitle_commission_left = resData.ftitle_commission_left
          // this.wait_commission = resData.wait_commission
          // 图标数据
          this.gysInfo = resData
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then(res => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    Jump(url, data) {
      // console.log(this)
      this.$JumpPath(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },

  components: {
    userNav,
    userHeader,
    gysIndex,
    gysIndex2
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
</style>
